<template>
	<view class="confirm">
		<view class="banner">
			<view class="b_left">
				<image :src="info.filmImg" mode=""></image>
				<view class="mid">
					<view class="name">
						{{ info.filmName }}
					</view>
					<view class="times">
						{{ info.startTime | times }} {{ info.copyLanguage
            }}{{ info.copyType }}
					</view>
					<view class="address">
						{{ info.cinemaName }}
					</view>
					<view class="seat"> {{ info.hallName }} {{ info.seatName }} </view>
				</view>
			</view>

			<view class="right"> {{ info.ticketNum }}张 </view>
		</view>

		<view class="big_content">
			<view class="phone_box">
				<image src="../../static/tabsIcon/moph.png" mode=""></image>
				<view class="right">
					<u--input border="none" placeholder="请输入手机号" v-model="phone"></u--input>
					<view class="ms"> 手机号仅用于生成订单，不发送短信通知 </view>
				</view>
			</view>

			<view class="way"> 支付方式 </view>

			<view class="pay_box">
				<view @click="tabs(1)" class="pay_item">
					<view class="pay_left">
						<image src="../../static/tabsIcon/payment/we.png" mode=""></image>
						<text>微信支付</text>
					</view>
					<view class="pay_right">
						<image v-if="act == 1" src="../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
					</view>
				</view>
				<view @click="tabs(2)" class="pay_item">
					<view class="pay_left">
						<image src="../../static/tabsIcon/payment/ali.png" mode=""></image>
						<text>支付宝</text>
					</view>
					<view class="pay_right">
						<image v-if="act == 2" src="../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
					</view>
				</view>
				<view @click="tabs(0)" class="pay_item">
					<view class="pay_left">
						<image src="../../static/tabsIcon/payment/ye.png" mode=""></image>
						<text>账户余额</text>
					</view>
					<view class="pay_right">
						<image v-if="act == 0" src="../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="btn_box">
				<view @click="tolock()" class="btn">
					￥{{ info.totalTicketPrice }} 去支付
				</view>
			</view>

			<view class="need">
				<view class="nes"> 购票须知 </view>
				<view class="nes_content">
					<view class="tis">
						1.<text style="color: red">特惠购票出票较慢，座位不足时会自动调座</text>
					</view>
					<view class="tis">
						2.<text style="color: red">请确认好该场次的播放时间，片名，人数，座位</text>
					</view>
					<view class="tis">
						3.受理中，已出票的订单<text style="color: red">不可改签，替换</text>
					</view>
					<view class="tis">
						4.若因设备故障，存在少量影院排片变化等不可抗因素，会进行退票，重新下单即可
					</view>
					<view class="tis">
						5.若因系统繁忙的情况下，出现出票失败的情况下，几小时内系统将会退回原账户
					</view>
				</view>
			</view>
		</view>

		<pay-keyboard @Fpassword="Fpassword" ref="password" :show_key="show_key" @hideFun="hideFun"
			@getPassword="getPassword"></pay-keyboard>
	</view>
</template>

<script>
	import payKeyboard from "@/components/keyboard.vue";
	import {
		filmorderdetailid,
		filmbalance,
		filmali,
		filmweixin
	} from "@/api/oil";
	import {
		checkpass
	} from '@/api/mine'
	export default {
		components: {
			payKeyboard: payKeyboard,
		},
		data() {
			return {
				show_key: false,
				act: 0,
				cinemaId: "",
				featureAppNo: "",
				setlist: [],
				fuwu: 0,
				price: 0,
				info: [],
				nums: 0,
				phone: "",
				paypass: "",
				ap: "",
				orderId: "",
				pascheck: false,
			};
		},
		filters: {
			times(value) {
				// let str = value * 1000
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? "0" + MM : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? "0" + d : d;
				let h = date.getHours(); // 时
				h = h < 10 ? "0" + h : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? "0" + m : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? "0" + s : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + "年" + MM + "月" + d + "日";
				return timer;
			},
		},
		onLoad(option) {
			// this.cinemaId = option.cinemaId;
			// this.featureAppNo = option.featureAppNo;
			// this.nums = option.nums;
			this.orderId = option.orderId;
			// this.getPlanDetail()
			this.filmorderdetailid();
			this.checkpass();
		},
		methods: {
			checkpass() {
				checkpass().then(res => {
					this.pascheck = res.data;
				})
			},
			filmorderdetailid() {
				filmorderdetailid(this.orderId).then((res) => {
					console.log(res.data);
					if (res.success == 1) {
						this.info = res.data;
						this.price = res.data.ticketPrice;
						this.fuwu = res.data.thresholds;
						// this.ap = this.nums * (Number(this.price) + Number(this.fuwu))
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						});
					}
				});
			},
			tolock() {
				if (!this.phone) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号!",
					});
					return;
				}
				if (this.act == 0) {
					if (this.pascheck) {
						this.show_key = true;
					} else {
						uni.showToast({
							icon: 'none',
							title: '请先设置支付密码!'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '../mine/setpaypass'
							})
						}, 1000)
					}
				} else if (this.act == 1) {
					this.filmweixin();
				} else if (this.act == 2) {
					this.filmali();
				}
			},
			tabs(i) {
				this.act = i;
			},
			getPassword(n) {
				// console.log("用户输入的密码", n)
				this.paypass = n.password;
				this.$refs.password.clier();
				this.hideFun();
				this.filmbalance();
				// if (this.type == 1) {
				// 	this.rechange()
				// } else {
				// 	this.dianrechange()
				// }
			},
			filmbalance() {
				let data = {
					id: this.orderId,
					password: this.paypass,
					phone: this.phone,
				};
				filmbalance(data).then((res) => {
					if (res.success == 1) {
						uni.showToast({
							icon: "none",
							title: "支付成功!",
						});
						setTimeout(() => {
							uni.switchTab({
								url: "./orderdetails?id=" + this.orderId,
							});
						}, 1000);
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						});
					}
				});
			},
			filmweixin() {
				let data = {
					id: this.orderId,
					phone: this.phone,
				};
				filmweixin(data).then((res) => {

					if (res.success == 1) {
						let that = this;
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data,
							success: function(res) {
								uni.showToast({
									icon: "none",
									title: "支付成功!",
								});
								setTimeout(() => {
									uni.reLaunch({
										url: "./orderdetails?id=" + that.orderId,
									});
								}, 1000);
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							},
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						});
					}
				});
			},
			filmali() {
				let data = {
					id: this.orderId,
					phone: this.phone,
				};
				filmali(data).then((res) => {
					if (res.success == 1) {
						let that = this;
						uni.requestPayment({
							provider: "alipay",
							orderInfo: res.data,
							success: function(res) {
								uni.showToast({
									icon: "none",
									title: "支付成功!",
								});
								setTimeout(() => {
									uni.reLaunch({
										url: "./orderdetails?id=" + that.orderId,
									});
								}, 1000);
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							},
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						});
					}
				});
			},
			tabss(i) {
				this.act = i;
			},
			Fpassword() {
				uni.navigateTo({
					url: "../mine/forgetpass",
				});
			},
			showFun() {
				this.show_key = true;
			},
			hideFun() {
				this.show_key = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f4f4f4;
	}

	.confirm {
		// padding: 30rpx;
	}

	.banner {
		background: #fc6758;
		padding: 30rpx;
		height: 360rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		color: #fff;

		image {
			width: 160rpx;
			height: 240rpx;
			margin-right: 15rpx;
			border-radius: 15rpx;
		}

		.b_left {
			display: flex;
		}

		.mid {
			view {
				margin-bottom: 15rpx;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.times {
				font-size: 26rpx;
				font-weight: bold;
			}

			.address {
				font-size: 26rpx;
			}

			.seat {
				font-size: 26rpx;
			}
		}

		.right {
			font-size: 26rpx;
		}
	}

	.big_content {
		padding: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		top: -70rpx;
	}

	.phone_box {
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.ms {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999999;
		}
	}

	.btn_box {
		width: 100%;

		.btn {
			width: 100%;
			color: #ffffff;
			background: #fc6758;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 20rpx;
		}
	}

	.need {
		background: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;

		.nes {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
		}

		.nes_content {
			padding: 10rpx 0;

			.tis {
				font-size: 26rpx;
				display: flex;
				margin-bottom: 10rpx;
				color: rgba(0, 0, 0, 0.6);
			}
		}
	}

	.way {
		color: #666666;
		font-size: 30rpx;
		margin: 20rpx 0;
	}

	.pay_box {
		background: #ffffff;
		margin: 20rpx 0;
		padding: 10rpx;
		border-radius: 20rpx;

		.pay_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0 40rpx;

			.pay_left {
				color: #333333;
				font-size: 26rpx;
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			.pay_right {
				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
	}
</style>
